<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../../css/palette_new.css" />
<script language="javascript" type="text/javascript" src="../../../../js/prototype.js"></script>
<script language="javascript">
<!--
var colorGrid;
var source;
var blocked = false;

function doOnMouseOver( event )
{
  if( blocked )
    return;
  source = Event.element(event);
  var pos = Position.cumulativeOffset( source ); // ( palette );
  colorGrid.style.left = pos[0] + "px"
  colorGrid.style.top =  pos[1] + source.getHeight() + "px"
  colorGrid.show();
  blocked = true;
}

function doOnMouseOverColors( event )
{
  if( source.id == 'palette.fgcol')
    source.style.color = Event.element(event).style.backgroundColor;
  else  
    source.style.backgroundColor = Event.element(event).style.backgroundColor;
}

function doOnClick()
{
  colorGrid.hide();
  blocked = false;
  if( source.id == 'palette.fgcol')
    source.style.color = 'black';
  else  
    source.style.backgroundColor = 'black';
}  

//-->
</script>
<title>Style Palette</title>
</head>
<body>
<div class="colorGrid" id="colors">
  <div>
    <a id="colors.0"  class="colitem" style="background-color:#FFFFFF" title="#FFFFFF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.1"  class="colitem" style="background-color:#FFFF7F" title="#FFFF7F" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.3"  class="colitem" style="background-color:#FF7FFF" title="#FF7FFF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.9"  class="colitem" style="background-color:#AFFFFF" title="#AFFFFF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.4"  class="colitem" style="background-color:#FF7F7F" title="#FF7F7F" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.10" class="colitem" style="background-color:#7FFF7F" title="#7FFF7F" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
  </div>
  <div style="clear:left;">
    <a id="colors.12" class="colitem" style="background-color:#7F7FFF" title="#7F7FFF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.13" class="colitem" style="background-color:#7F7F7F" title="#7F7F7F" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.6"  class="colitem" style="background-color:#FF00FF" title="#FF00FF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.2"  class="colitem" style="background-color:#FFFF00" title="#FFFF00" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.18" class="colitem" style="background-color:#00FFFF" title="#00FFFF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.5"  class="colitem" style="background-color:#FF7F00" title="#FF7F00" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
  </div>
  <div style="clear:left;">
    <a id="colors.11" class="colitem" style="background-color:#7FFF00" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.7"  class="colitem" style="background-color:#FF007F" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.15" class="colitem" style="background-color:#7F00FF" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.19" class="colitem" style="background-color:#00FF7F" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.21" class="colitem" style="background-color:#007FFF" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.14" class="colitem" style="background-color:#7F7F00" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
  </div>
  <div style="clear:left;">
    <a id="colors.16" class="colitem" style="background-color:#7F007F" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.22" class="colitem" style="background-color:#007F7F" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.8"  class="colitem" style="background-color:#FF0000" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.20" class="colitem" style="background-color:#00FF00" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.24" class="colitem" style="background-color:#0000FF" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.17" class="colitem" style="background-color:#7F0000" title="" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
  </div>
  <div style="clear:left;">
    <a id="colors.23" class="colitem" style="background-color:#007F00" title="#007F00" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.25" class="colitem" style="background-color:#00007F" title="#00007F" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.27" class="colitem" style="background-color:#00AFAF" title="#00AFAF" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.28" class="colitem" style="background-color:#7F7F3F" title="#7F7F3F" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.29" class="colitem" style="background-color:#7F3F00" title="#7F3F00" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
    <a id="colors.26" class="colitem" style="background-color:#000000" title="#000000" href="javascript:doOnClick();" onmouseover="doOnMouseOverColors( event );"></a>
  </div>
</div>

<div class="frame" id="palette">
  <div class="title" style="float:left;">
    WcmE
  </div>
  <div class="item" id="palette.fgcol" style="float:left;" onmouseover="doOnMouseOver( event );">
    A
  </div>
  <div class="item" id="palette.bgcol" style="float:left; color:white; background-color:black;" onmouseover="doOnMouseOver( event );">
    A
  </div>
  <a class="item" style="float:left; font-weight:bold;" href="javascript:void(0)">
    B
  </a>
  <a class="item" style="float:left; font-style:italic;" href="javascript:void(0)">
    B
  </a>
  <a class="item" style="float:left; text-decoration:underline;" href="javascript:void(0)">
    B
  </a>
  <a class="item" style="float:left;" href="javascript:void(0)">
    +
  </a>
  <a class="item" style="float:left;" href="javascript:void(0)">
    -
  </a>
</div>
<iframe id="editframe" src="../html/iframe.html"></iframe>
<script type="text/javascript">
<!--

colorGrid = $('colors');
colorGrid.hide();

//-->
</script>
</body>
</html>
